{% extends "common/base.html" %}

 {% block main %}
    <div class="main-content item-box">

        <div class="item-list">
            <div class="article-content-box layui-row">
                <h1>{{ article.title }}</h1>
                <div class="article-param layui-row">
                    {{ article.pub_date }}<span><a href="#">{{ article.author }}</a></span><span>阅读数：{{ article.hits }}</span><span>评论数：{{ article.replycount }}</span>&nbsp;&nbsp;
                    <span class="hz-span layui-badge layui-bg-gray">编程语言</span>
                    <span class="hz-span layui-badge layui-bg-gray">编程基础</span>
                    <span class="hz-span layui-badge layui-bg-gray">编程入门</span>
                </div>
                <div class="article-prompt">
                    版权声明：本文为博主原创文章，如果转载请给出原文链接：http://www.jufanshare.com/content/30.html
                </div>
                <div class="article-prompt">
                    阅读提示：{{ article.description }}
                </div>
                <article>
                    {% autoescape off %}
                       {{ article.content }}
                    {% endautoescape %}

                </article>
                <div class="article-author layui-row">_____by 作者：<a href="#">{{ article.author }}</a></div>
                <div class="contact-row layui-row">
                    <div class="contact-me-box">
                        <p>欢迎交流！</p>
                        <div class="a-href-box">
                            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=173124552&site=qq&menu=yes">
                                <img border="0" src="http://wpa.qq.com/pa?p=2:173124552:51" alt="大BUG" title="大BUG"/>
                            </a>
                            <a target="_blank" href="http://shang.qq.com/wpa/qunwpa?idkey=f9cb533de3ba27133b16a4988dd10b0acaddad9790cc33e9d8348922729892a7">
                                <img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="聚繁分享" title="聚繁分享">
                            </a>
                            <a href="#" style="color: #1E9FFF;">更多联系方式</a>
                        </div>
                    </div>
                </div>
            </div>
            <form action="{% url 'app:remark_article' %}" method="post">
              {% csrf_token %}
                <input type="hidden" name="tid" value="{{ article.tid }}">
                <div class="comment-box layui-row">
                    <div class="textarea-box layui-row">
                        <textarea name="comment" placeholder="仅支持纯文本，如果有什么文字无法描述的问题、建议、意见，请加QQ群"></textarea>
                    </div>
                    <div class="text-num-tips layui-row">还可以输入<span>500</span>个字</div>
                    <div class="common-btnbox">
                        {% if user.is_authenticated %}

                                <button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon">&#xe642;</i>留言</button>
                                <button class="layui-btn layui-btn-sm layui-btn-disabled"><i class="layui-icon">&#xe66f;</i>登录</button>
                        {% else %}
                              <button class="layui-btn layui-btn-normal layui-btn-sm layui-btn-disabled" ><i class="layui-icon">&#xe642;</i>留言</button>
                              <button class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe66f;</i>登录</button>

                        {% endif %}
                    </div>
                </div>
            </form>
            <div class="comment-list layui-row">
                <ul>
                   {% for comm in comments %}
                    <li>
                        <div class="common-box-row layui-row">
                            <div class="common-headimg layui-col-md1 layui-col-xs2">
                                <div class="commonimg-box">
                                    <img src="/static/imgs/canreplace/headimg.jpg">
                                </div>
                            </div>
                            <div class="common-info-row layui-col-md11 layui-col-xs10">
                                <div class="common-nickname layui-row">{{ comm.replydate }}<span>{{ comm.author }}</span></div>
                                <div class="common-text layui-row">
                                    {{ comm.content }}
                                </div>
                            </div>
                        </div>
                    </li>
                   {% endfor %}
                </ul>
            </div>
        </div>
    </div>
{% endblock %}
{% block outer_js %}
<script src="/static/plugin/layui/layui.js"></script>
<script src="/static/plugin/jquery/jquery-3.3.1.min.js"></script>
<script src="/static/plugin/prism/prism.js"></script><!--代码高亮工具-->
<script>
    //然后在需要的位置调用如下方法
    Prism.highlightAll();
    $('pre').addClass("line-numbers").css("white-space", "pre-wrap");//显示行号
    layui.use('laypage', function(){
        var laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'pageItem', //注意，这里的 test1 是 ID，不用加 # 号
            count: 50, //数据总数，从服务端得到
            jump: function(obj, first){
                //obj包含了当前分页的所有参数，比如：
                console.log('当前页数：'+obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                console.log('每页数量：'+obj.limit); //得到每页显示的条数
                //首次不执行
                if(!first){
                   console.log('执行')
                }
            }
        });
    });
</script>
{% endblock %}
